import React from "react";
import axios from "axios";

class Home extends React.Component {
  state = {
    list: [],
    activeIndex: 0,
  };
  fetchList = async () => {
    const resp = await axios.get("/api/select/list");
    console.log(resp.data.data);
    this.setState({
      list: resp.data.data,
    });
  };
  render() {
    const { list, activeIndex } = this.state;

    return (
      <div>
        <div className="title">
          {list.map((v, i) => {
            return (
              <div
                key={i}
                className={i === activeIndex ? "title-nav active" : "title-nav"}
                onMouseEnter={() => this.setState({ activeIndex: i })}
              >
                {v.title}
              </div>
            );
          })}
        </div>
        <div className="content" style={{ marginLeft: activeIndex * 60 }}>
          {
            list.length > 0 && list[activeIndex].children.map((v, i) => {
              return <div key={i}>{v.title}</div>
            })
          }
        </div>
      </div>
    );

    // return <div>
    //   <ul className="first-ul">
    //     {
    //       list.map((v, i) => {
    //         return <li key={i}>
    //           <span>{v.title}</span>
    //           <ul className="second-ul">
    //             {
    //               v.children.map((v, i) => {
    //                 return <li key={i}>{v.title}</li>
    //               })
    //             }
    //           </ul>
    //         </li>
    //       })
    //     }
    //   </ul>
    // </div>;
  }
  componentDidMount() {
    this.fetchList();
  }
}

export default Home;
